<template>
  <div>
    <a @click="showModal">{{ text }}</a>
    <a-modal 
      :title="text"
      centered
      :maskClosable="false"
      :width="1280"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">{{ $t('modal_close') }}</a-button>
      </template>

      <span>stackTrace</span>

      <a-table :columns="columns"
        :rowKey="record => record.className + record. methodName + record.lineNumber"
        :dataSource="row.stackTrace"
        :pagination="false"
        size="small"
        :scroll="{ x: 1000 }"
      >
      </a-table>


    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    text: { type: [String] },
    row: { type: [Object], default: () => { return {} } },
  },
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    columns() {
      const columns = [
        { title: 'Class Name', dataIndex: 'className', customRender: (text) => { return <LongTableColumn>{text}</LongTableColumn> }, width: 400 },
        { title: 'Method Name', dataIndex: 'methodName', customRender: (text) => { return <LongTableColumn>{text}</LongTableColumn> }, width: 100 },
        { title: 'File Name', dataIndex: 'fileName', customRender: (text) => { return <LongTableColumn>{text}</LongTableColumn> }, width: 155 },
        { title: 'Line Number', dataIndex: 'lineNumber', width: 100 },
        { title: 'Native Method', dataIndex: 'nativeMethod',  width: 100 },
      ]
      return columns
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
  }
}
</script>
